<template>
  <div class="suggestion-area">
    <div class="item main-item">
      <span class="title">
        当前企业在同行业和产业上下游中排名大于
        {{ totalThreshold }}
        ，评分超过{{ totalScore }}%的企业
      </span>
      <a-progress
        :percent="(totalScore / totalThreshold) * 100"
        strokeColor="#52c41a"
        :strokeWidth="12"
      />
    </div>
    <div class="item" v-for="item in detailList" :key="item.id">
      <span class="title">{{ item.description }}</span>
      <a-progress
        :percent="item.percent"
        :format="() => item.score + item.unit"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalScore: 0,
      totalThreshold: 0,
      detailList: [],
    };
  },
  props: {
    data: {
      type: Array,
      default: () => {},
    },
  },
  watch: {
    data(newValue, oldValue) {
      if (newValue) {
        let totalItem = newValue.find((item) => item.id == 99);
        console.log("totalItem", totalItem);
        this.totalScore = totalItem.score;
        this.totalThreshold = totalItem.threshold;
        this.detailList = newValue
          .filter((item) => item.id != 99)
          .map((item) => {
            item.description = this.stringFormat(item.description, item);
            item.percent = (item.score / item.threshold) * 100;
            item.percent = item.percent == 0 ? 2 : item.percent;
            return item;
          });
        this.$forceUpdate();
      }
    },
  },
  methods: {
    stringFormat(str, obj) {
      if (!str || str.length == 0) return str;
      for (var key in obj) {
        str = str.replace(new RegExp("\\{\\{" + key + "\\}\\}", "g"), obj[key]);
      }
      return str;
    },
  },
};
</script>

<style lang="less" scoped>
.suggestion-area {
  margin: 0 auto;

  .item {
    height: 64px;
    padding-top: 10px;
  }
  .main-item {
    height: 72px;

    .title {
      font-size: 18px;
    }
    .ant-progress {
      height: 30px;
    }
  }
}
</style>
